<template>
    <div class="main">
        <div class="container">
            <div class="box message-contain">
                <h1 style="margin-bottom: 2%;">此消息为匿名消息(<span style="font-weight: 1; font-size: 1rem;">将以邮件方式通知</span>)
                </h1>

                <el-input class="input-nickname" v-model="nickname" placeholder="请输入您的昵称" />

                <el-input class="input-content" v-model="textarea" :rows="15" type="textarea"
                    placeholder="请输入你想输入的内容:" />

                <el-button type="primary" style="margin-top: 2%;" @Click="send()">发送</el-button>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { instance as http } from '../axios/index'
import Cookies from 'js-cookie';
const textarea = ref('')
const nickname = ref('')

function send() {
    if (nickname.value == '') {
        errorInfo()
    } else {
        http.get(`/user/sendMessage?nickname=${encodeURIComponent(nickname.value)}&text=${encodeURIComponent(textarea.value)}&address=${Cookies.get("address")}`).
            then(
                success => {
                    if (success.data.code == 200) {
                        successInfo()
                    } else {
                        ElMessage.error('网络错误,消息发送失败')
                    }
                }
            ).catch(
                error => {
                    ElMessage.error('网络错误,消息发送失败')
                }
            );
    }
}

const successInfo = () => {
    ElMessage({
        message: '匿名信息发送成功',
        type: 'success',
    })
}

const errorInfo = () => {
    ElMessage.error('昵称不能为空')
}

</script>

<style scoped>
.input-content {
    width: 640px;
}

.input-nickname {
    width: 240px;
    padding-bottom: 1%;


}


@media (max-width: 768px) {
    .input-content {
        width: 320px;
    }
}


.message-contain {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 4%;
}
</style>